<template>
  <div>
    <div class="flex justify-center bg-main">
      <div class="width-main paddding-tb margin-tb">
        <h3 class="margin-tb">
          <span class="title-tag">标签({{ tags.count }})</span>
        </h3>
        <div class="tags">
          <span v-for="(item, index) in tags.data" :key="index"
            >🔖&nbsp;{{ item.tag_name }}({{ item.count }})</span
          >
          <div class="line bg-orange"></div>
        </div>
        <h3>
          <span class="title-cate">分类({{ categories.count }})</span>
        </h3>
        <div class="tags">
          <span v-for="(item, index) in categories.data" :key="index"
            >🏀&nbsp;{{ item.cate_name }}({{ item.count }})</span
          >
          <div class="line bg-purple"></div>
        </div>
      </div>
    </div>
    <Comment></Comment>
  </div>
</template>
<script>
import { blogCates, blogTags } from "@/apiv/article";
export default {
  data() {
    return {
      // colors: [
      //   "bg-orange",
      //   "bg-purple",
      //   "bg-green",
      //   "bg-red",
      //   "bg-yellow",
      //   "bg-blue",
      // ],
      categories: {},
      tags: {},
    };
  },
  mounted() {
    this.handleLoad();
  },
  methods: {
    handleLoad() {
      Promise.all([blogTags(), blogCates()]).then((res) => {
        console.log(res, "RES");
        const [tags, cates] = res;
        this.categories = cates.data;
        this.tags = tags.data;
      });
    },
    // getRandcolor() {
    //   let r = Math.floor(Math.random() * 6);
    //   return this.colors[r];
    // },
  },
};
</script>
<style lang='scss' scoped>
.title-tag {
  font-size: 1rem;
  font-weight: 700;
  color: #3c3626;
  box-shadow: 2px 2px 2px #dcd5c3, -1px -1px 1px #ffffff;
  display: inline-block;
  border-radius: 10px;
  text-align: center;
  padding: 0.6rem 2rem;
  box-sizing: border-box;
  margin: 0 0 0.4rem;
  position: relative;
  line-height: 1.3;
  text-shadow: 2px 2px 1px #fff;
  background: #f3efe6;

  &::before {
    content: "📝";
    font-size: 7px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.title-cate {
  font-size: 1rem;
  font-weight: 700;
  color: #3c3626;
  box-shadow: 2px 2px 2px #dcd5c3, -1px -1px 1px #ffffff;
  display: inline-block;
  border-radius: 10px;
  text-align: center;
  padding: 0.6rem 2rem;
  box-sizing: border-box;
  margin: 0 0 0.4rem;
  position: relative;
  line-height: 1.3;
  text-shadow: 2px 2px 1px #fff;
  background: #f3efe6;

  &::before {
    content: "🏀";
    font-size: 7px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.tags {
  margin: 0;
  padding: 15px 0;
  text-align: center;
}

.tags span {
  cursor: pointer;
  display: inline-block;
  margin: 12px 10px 0 0;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 2px 2px 3px #cac1a7, -2px -2px 3px #ffffff;
  color: #111 !important;
  border-radius: 10px;
  text-align: center;
  padding: 15px;
  box-sizing: border-box;
  position: relative;
  line-height: 1.3;
  text-shadow: 2px 2px 1px #fff;
  background: #f3efe6;

  &:hover {
    box-shadow: 1px 1px 1px #d9d2be, -1px -1px 1px #ffffff;
  }
}

.line {
  width: 55px;
  height: 2px;
  margin: 20px auto 10px;
}
</style>